<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘京搜索</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/search.css"/>
	</head>
	<body>
		<div id="search">
			<div class="head1">
				<div class="layui-row">
				    <div class="layui-col-xs1">
				      <div class="grid-demo"></div>
				    </div>
					<div class="layui-col-xs4">
					  <div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
					</div>
				    
					<div class="layui-col-xs1">
						<div class="login">
							<div class="grid-demo grid-demo-bg1" id="classifiction_2" >
								<a id="login-reg" href="javascript:void(0)" onclick="logcheck()" style="margin-top: 5px;">登录/注册</a>
							</div>
							<div class="login_check">
								<div class="userpic"><a href="#" ><img src="imgs/购物.png" /></a></div>
								<div class="userinfo" >
									<div class="username" id="classifiction_2">
										<a id="uname" href="javascript:void(0)" >用户名</a>
										<h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
									</div>
									<div class="userid" >ID:用户编号:<a id="uno" href="javascript:void(0)" >id</a></div>
								</div>
							</div>
						</div>
					 
					</div>
				    <div class="layui-col-xs1">
				      <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的订单</a></div>
				    </div>
					<div class="layui-col-xs1">
					  <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的淘京</a></div>
					</div>
					<div class="layui-col-xs1">
					  <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">商家服务</a></div>
					</div>
				    <div class="layui-col-xs1">
				      <div class="grid-demo" id="classifiction_2"><a href="#">关于淘京</a></div>
				    </div>
					<div class="layui-col-xs1">
					  <div class="grid-demo" id="classifiction_2"><a href="#">企业采购</a></div>
					</div>
					
				  </div>
				
			</div>
			
			<div class="head">
			    
			      <div class="logo_pic"><a href="index.html"><img src="imgs/logo2.png" /></a></div>
				  
			      <div class="serch">
						<div class="serch_box"><input type="text" name="username" id="content" placeholder="淘入好物，就用淘京"></div>
						<div class="serch_pic"><a href="javascript:void(0)" @click="showDatail()"><img src="imgs/serch.png"/></a></div>
				  </div>
				  <div class="shoppingcart">
					  <div class="shoppingcart_pic"><img src="imgs/shoppingcart.png" /></div>
					  <div class="shoppingcart_char"><a href="cart.html"><h1>我的购物车<div class="num" >{{carttotal}}</div></h1></a></div>
				  </div>
			</div>
			
			<div class="seach_main">
				
				<div class="seach_goods">
					<div class=seach_sort >
						<div class="seach1_select" id="seach_all"><a href="#">综合排序</a></div>
						<div class="seach1" id="seach_buy"><a href="#">销量</a></div>
						<div class="seach1" id="seach_score"><a href="#">评分</a></div>
						<div class="seach1" id="seach_price"><a href="#" @click="showpsort">价格</a></div>
						 <div class="seach_price1">
						      <div  id="seach_price1_min">
						        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="seach_price1_1" id="min" @blur="showprice">
						      </div>
						      <div class="seach_price1_to">-</div>
						      <div  id="seach_price1_max">
						        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="seach_price1_1" id="max" @blur="showprice">
						      </div>
							 <div class="sure"><a href="#">确定</a></div>
						  </div>
					</div>
					
					
					<div class="seach_hot">
						
					</div>

					<div class="seach_good">
						<div class="goods" v-for="g in goods" >
							<a href="javascript:void(0)"@click="showgoodsId"><img img :src="g.gpics"/></a>
							<p id="gno" style="height: 10px;display: none">{{g.gno}}</p>
							<h1 class="gname" style="height: 25px;margin-top:10px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{g.gname}}</h1>
							<div class="good1">
								<p class="gpics">￥{{g.gprice}}</p>
								<a href="javascript:void(0)" @click="getshoppingcart" id="addsc"><img src="imgs/shoppingcart2.png" style="width: 25px;height: 25px"></a>
							</div>

						</div>
						<!--分页标签-->
						<div id="demo7" style="z-index: 1;" ></div>

					</div>

				</div>

			</div>

			<div id="tishi">
				<div class="tipic">
					<img src="imgs/addshoppingok.png"/>
				</div>
				<div class="lei">
					<h1>成功加入购物车</h1>
				</div>
				<div class="sure2" id="isure"><h1><a href="javascript:void(0)" @click="closeshoppingcart">再逛逛</a></h1></div>
				<div class="sure1" id="isure2"><h1><a href="javascript:void(0)" @click="goshoppingcart">去结算</a></h1></div>
			</div>

			<div id="footer" class="footer">
					<p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>
			
			<p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>
			
			<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>
			
			<p>Copyright © 2004 - 2023  京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照 | 增值电信业务经营许可证</p>
			
			<p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
			</p>
			
		</div>
	</div>
		<script src="layui/layui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/jquery-3.4.1.min.js"></script>

		<script>
			// 权限控制
			$(function () {
				$.get("user?op=check", function (rs) {
					console.log(rs);
					if (rs.code == 601) {//暂未登录
						window.location.href = "login.html";
					}
					if (rs.code == 200) {//登录成功
						$("#uname").html(rs.data.user.uname);
						$("#uno").html(rs.data.user.uno);
						$("#login-reg").html("欢迎:"+rs.data.user.uname);
					}
				},"json");
			});

			function logcheck(){
				$.get("user?op=check", function (rs) {
					console.log(rs);
					if (rs.code == 601) {//暂未登录
						window.location.href = "login.html";
					}
					if (rs.code == 200) {//登录成功
						//到个人中心

					}
				},"json");
			}

			function exit(){
				$.get("user?op=exit", function (rs) {
					if (rs == 0) {//注销成功
						$("#uname").html('用户名');
						$("#uno").html('');
						$("#login-reg").html('登录/注册');
						window.location.href = "index.html";
					}else{
						alert('退出失败');
					}
				},"json");
			}
		</script>
		<script>
			$(document).on("click",'.seach1',function(){
				$(".seach1_select").addClass("seach1");
				$(".seach1_select").removeClass("seach1_select");
				$(this).addClass("seach1_select");
			});
			$(document).on("click",'.seach_price1_1',function(){
				$(".seach_price1_select").addClass("seach_price1_1");
				$(".seach_price1_select").removeClass("seach_price1_select");
				$(this).addClass("seach_price1_select");
			});

			let path=window.location.hash;
			//地址必须是detail.html#3
			if (path.indexOf("#")<0){
				//地址不正确 跳转到主页面
				window.location.href='index.html';
			}
			let tname=decodeURIComponent(path.substr(1));//获取tname或者gname
			if (tname==="推荐"){//判断是否为点击的为推荐页面，如果是则显示所有数据
				tname=null;
			}

			let v=new Vue({
				el:"#search",
				data:{
					goods:{},
					tname:tname,
					min:null,
					max:null,
					flag:true,
					limit:20,
					count:0,
					flag1:false,
					flag2:false,
					carttotal:null,
					curr:1,
					carousel:null,
					uno:1//从页面上获取uid
				},
				mounted () {
					//获取购物车内商品数量
					axios.get("cart",{params:{op:"carttotal",uno:this.uno}}).then(rs=>{
						if (rs.status==200){
							this.carttotal=rs.data.carttotal;
						}
					});

					var _this =this
					layui.use(['laypage'],function(){
						_this.finds(1,_this.limit);
					});

				},
				methods:{
				finds(curr,limit){
					this.carousel = layui.carousel
							, laypage=layui.laypage
							, $=layui.jquery;
					//建造实例
					this.carousel.render({
						elem: '#test1'
						,width: '100%' //设置容器宽度
						,height:'240px'
						,arrow: 'always' //始终显示箭头
					});
				axios.get("tj",{params:{op:"searchGoods",gname:tname,tname:tname,page:curr,limit:limit}}).then(rs=>{
					if (rs.status==200){
						this.goods=rs.data.data;
						this.goods=changePics(this.goods);
						this.count=rs.data.count;

						//首次访问 显示分页组件
						if(this.flag1==false){
							var _this=this;
							laypage.render({

								elem: 'demo7'
								,count: _this.count
								,limit:limit
								,limits:[10,15,20]
								,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
								,jump(obj){
									if(_this.flag1==true){//不是第一次查询数据
										_this.finds(obj.curr,obj.limit);
									}
								}
							});
						}
						this.flag1=true;
					}else{
						// Layer.msg(rs.msg);
						// $("#yc-movies".html(''));
					}
				});
			},


					//获取商品gno跳转到商品详情页
					showgoodsId:function (event) {
						var g1=event.target;
						var g2=g1.parentElement.parentElement;
						var g3=g2.getElementsByTagName("p");
						//获取商品的gno
						var gno = g3[0].innerHTML;
						console.log(gno);
						//console.log(gno);
						location.href="details.html#"+gno;
					},


					//搜索
					showDatail:function() {

						var gname=document.getElementById("content").value;
						location.href="search.html#"+gname;
						//刷新页面
						location.reload();
					},
					//分类搜索
					showclassification:function (event) {
						var id=event.target.id;
						var classifica=document.getElementById(id).textContent;
						location.href="search.html#"+classifica;
					},
					//购物车
					getshoppingcart:function (event) {
						var g1=event.target;
						var g2=g1.parentElement.parentElement.parentElement;
						var g3= g2.getElementsByTagName("p");
						//获取商品的gno
						var gno = g3[0].innerHTML;
						//从登录框内获取uno
						var uno=1;
						//默认数量为1
						var number=1;
						//获取gno的第一个gdno
						axios.get("gd",{params:{op:"searchGoodsDetail",gno:gno}}).then(rs=>{
							if (rs.status==200){
								var gd=rs.data.data;
								console.log(gd[0].gdno);
								this.gdno=gd[0].gdno;
							}
							//添加到购物车
							axios.get("cart",{params:{op:"addshoppingcart",number:number,uno:uno,gdno:this.gdno}}).then(rs=>{
								if (rs.status==200){
									this.carttotal=rs.carttotal;
									//点击提示添加到购物车成功
									// 获取要隐藏或显示的内容元素
									var hiddenContent = document.getElementById('tishi');
									// 获取目标链接元素
									var link = document.getElementById('link');
									// 监听链接的点击事件
									event.preventDefault(); // 阻止链接的默认跳转行为
									hiddenContent.style.display = 'flex'; // 显示隐藏的内容
								}
							});

						});
					},
					//根据价格范围排序
					showprice:function () {
						//获取价格框内数据 (去除首尾空格)
						this.min=document.getElementById("min").value.trim();
						this.max=document.getElementById("max").value.trim();
						//判断是否有值
						if (this.min!=""||this.max!=""){
							$(".sure").addClass("sure_select");
							$(".sure").removeClass("sure");
							axios.get("tj",{params: {op:"searchGoods",min:this.min,max:this.max,gname:tname,tname:tname,page:this.curr,limit:this.limit}}).then(rs=>{
								if (rs.status==200){
									this.goods=rs.data.data;
									this.goods=changePics(this.goods);
								}
							});
						}else {
							$(".sure_select").addClass("sure");
							$(".sure_select").removeClass("sure_select");
							// axios.get("tj",{params: {op:"searchGoods",min:this.min,max:this.max,gname:tname,tname:tname}}).then(rs=>{
							// 	if (rs.status==200){
							// 		this.goods=rs.data.data;
							// 		this.goods=changePics(this.goods);
							// 	}
							// });
						}

					},
					//根据价格排序
					showpsort:function () {
						if (this.flag==true){//第一次点击为true 判断为从小到大排序 	false 判断为从大到小排序
							axios.get("tj",{params: {op:"searchGoods",min:this.min,max:this.max,gname:tname,tname:tname,psort:1,page:this.curr,limit:this.limit}}).then(rs=>{//psort:1为从小到大排序
								if (rs.status==200){
									this.goods=rs.data.data;
									this.goods=changePics(this.goods);

									layui.use(['laypage'],function(){
										 var _this=this;
										_this.carousel = layui.carousel
												, laypage=layui.laypage
												, $=layui.jquery;
										//建造实例
										_this.carousel.render({
											elem: '#test1'
											,width: '100%' //设置容器宽度
											,height:'240px'
											,arrow: 'always' //始终显示箭头
										});
										//首次访问 显示分页组件
										if(_this.flag2==false){
											console.log(_this.flag2);
											var __this=_this;
											laypage.render({
												elem: 'demo7'
												,count: __this.count
												,limit:20
												,limits:[10,15,20]
												,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
												,jump(obj){
													console.log(obj);
													console.log(__this.flag2);
													if(__this.flag2==true){//不是第一次查询数据

														__this.showpsort(obj.curr,obj.limit);

													}
												}
											});

											__this.flag2=true;
										}else{
											// Layer.msg(rs.msg);
											// $("#yc-movies".html(''));
										}
									});

								}
							});
							this.flag=false;
						}else{
							axios.get("tj",{params: {op:"searchGoods",min:this.min,max:this.max,gname:tname,tname:tname,psort:2,page:this.curr,limit:this.limit}}).then(rs=>{//psort:2为从大到小排序
								if (rs.status==200){
									this.goods=rs.data.data;
									this.goods=changePics(this.goods);
								}
							});
							this.flag=true;
						}
					},
					closeshoppingcart:function (event) {
						//点击关闭
						// 获取要隐藏或显示的内容元素
						var hiddenContent = document.getElementById('tishi');
						// 获取目标链接元素
						var sure = document.getElementById('isure');
						// 监听链接的点击事件
						event.preventDefault();// 阻止链接的默认跳转行为
						hiddenContent.style.display = 'none'; // 隐藏
						//刷新页面
						location.reload();
					},
					goshoppingcart:function (event) {
						//点击关闭
						// 获取要隐藏或显示的内容元素
						var hiddenContent = document.getElementById('tishi');
						// 获取目标链接元素
						var sure = document.getElementById('isure');
						// 监听链接的点击事件
						event.preventDefault();// 阻止链接的默认跳转行为
						hiddenContent.style.display = 'none'; // 隐藏
						location.href="cart.html#"+this.uno;/*点击结算，跳转到购物车页面，传入用户id*/
					}

				}
			});

			//处理图片 只需要一张图片路径 默认第一张图片
			function changePics(arr) {
				for (let i=0;i<arr.length;i++){
					var gpics=arr[i].gpics;
					console.log(gpics);
					if (gpics.indexOf(";")>0){
						gpics=gpics.substr(0,gpics.indexOf(";"));
						arr[i].gpics=gpics;
					}
				}
				return arr;
			}





		</script>
	</body>
</html>
